import React, { Component } from 'react'
import { Alert, Card, Avatar, Row, Col } from 'antd'
import http from '../../utile/axios'
import TopicCard from '../../component/TopicCard'
import { UserOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
require('dayjs/locale/zh-cn')
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)
export default class User extends Component {
  state = {
    card1: {},
    card2: {},
    card3: {}
  }
  http1 = () => {
    const {
      match: {
        params: { name }
      }
    } = this.props
    console.log(name)
    http
      .get(`/user/${name}`)
      .then(data => {
        if (data.status != 200) {
          ;<Alert message='Error Text' type='error' />
        }
        const {
          recent_replies,
          recent_topics,
          avatar_url,
          create_at,
          loginname,
          score
        } = data.data.data
        console.log(data.data.data)
        this.setState({
          card2: {
            recent_replies
          },
          card3: {
            recent_topics
          },
          card1: {
            avatar_url,
            create_at,
            loginname,
            score
          }
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  componentDidMount() {
    this.http1()
  }
  render() {
    return (
      <div>
        {/*用户信息*/}
        <Card title={'主页'} type={'inner'}>
          <Row>
            <Col span={20}>
              {' '}
              <Avatar
                icon={<UserOutlined />}
                src={this.state.card1.avatar_url}
                size={40}
              />
              <span
                style={{
                  marginLeft: '10px',
                  color: 'black'
                }}
              >
                {this.state.card1.loginname}
              </span>
            </Col>
            <Col span={4}>
              <p>注册时间:{dayjs(this.state.card1.create_at).fromNow()}</p>
            </Col>
          </Row>

          <p
            style={{
              marginTop: '10px',
              color: 'black'
            }}
          >
            {this.state.card1.score}积分
          </p>
        </Card>
        {/*最近创建的话题*/}
        <TopicCard
          data={this.state.card3.recent_topics}
          title={'最近创建的话题'}
        ></TopicCard>

        {/*最近参与的话题*/}
        <TopicCard
          data={this.state.card2.recent_replies}
          title='最近参与的话题'
        ></TopicCard>
      </div>
    )
  }
}
